<template lang="pug">
  .capture
    section.capture-item
      header 个人信息:
      Form(ref='personForm',:label-width='160',:model='portPerson',:rules='ruleValidate')
        FormItem(label='采集方式：')
          Select(v-model="portPerson.downloadType")
            Option(v-for="(method, index) in acquMethods",:value='method.value',:key="index") {{method.label}}
        FormItem(label='请求方式：',v-show="portPerson.downloadType===1")
          Select(v-model="portPerson.requestWay")
            Option(v-for="(way, index) in requestWays",:value='way.value',:key="index") {{way.label}}
        FormItem(label='请求Url：',prop='requestUrl',v-show="portPerson.downloadType===1")
          Input(v-model="portPerson.requestUrl")
        FormItem(label='参数抽取规则：',v-show="portPerson.downloadType===1")
          Input(v-model="portPerson.paramsExpressionRules")
        FormItem(label='点击元素Xpath规则：',prop='clickElementXpathRules',v-show="portPerson.downloadType===2")
          Input(type='textarea',v-model="portPerson.clickElementXpathRules",placeholder='多个Xpath规则用|隔开',:rows='6')
    section.capture-item
      header 缴费信息：
      Form(:label-width='160')
        FormItem(label='采集方式：')
          Select(v-model="pageItems[0].downloadType")
            Option(v-for="(method, index) in acquMethods",:value='method.value',:key="index") {{method.label}}
        FormItem(v-if="pageItems[0].downloadType!==0",style='margin:10px 0')
          Button(type='dashed',icon='plus-round',@click='handleAddPage') 添加Page
      aside(v-for="(item, index) in pageItems")
        .capture-item-header(v-if="pageItems[0].downloadType!==0")
          header page{{index+1}}
          Button(v-if="index>0",type='dashed',@click='handleRemove(index)') 删除
        Form(:label-width='160',:model='item',:rules='ruleValidate')
          FormItem(label='请求方式：',v-show="pageItems[0].downloadType===1")
            Select(v-model="item.requestWay")
              Option(v-for="(way, index) in requestWays",:value='way.value',:key="index") {{way.label}}
          FormItem(label='请求Url：',prop='requestUrl',v-show="pageItems[0].downloadType===1")
            Input(v-model="item.requestUrl",placeholder='请求Url')
          FormItem(label='参数抽取规则：',v-show="pageItems[0].downloadType===1")
            Input(v-model="item.paramsExpressionRules",placeholder='参数抽取规则')
          FormItem(label='点击元素Xpath规则：',prop='clickElementXpathRules',v-show="pageItems[0].downloadType===2")
            Input(type='textarea',v-model="item.clickElementXpathRules",placeholder='多个Xpath规则用|隔开',:rows='6')
</template>

<script>
import { asyncSite } from '../../api'

export default {
  data() {
    return {
      acquMethods: [{ value: 0, label: '当前页' }, { value: 1, label: '接口' }, { value: 2, label: '浏览器' }],
      requestWays: [{ value: 1, label: 'get' }, { value: 2, label: 'post' }, { value: 3, label: 'payload' }],
      portPerson: {
        siteId: this.$route.query.siteId,
        requestWay: 1,
        downloadType: 1,
        requestUrl: '',
        paramsExpressionRules: '',
        clickElementXpathRules: '',
        pageCollectionSequence: 1
      },
      ruleValidate: {
        requestUrl: [{ required: true, message: '请输入请求Url', trigger: 'blur' }],
        clickElementXpathRules: [{ required: true, message: '请输入点击元素Xpath规则', trigger: 'blur' }]
      },
      pageItems: [
        {
          index: 1,
          siteId: this.$route.query.siteId,
          requestWay: 1,
          downloadType: 1,
          requestUrl: '',
          paramsExpressionRules: '',
          clickElementXpathRules: '',
          pageCollectionSequence: 2
        }
      ]
    }
  },
  mounted() {
    this.handleSecurityRuleQuery()
  },
  methods: {
    handleSecurityRuleQuery: async function() {
      try {
        const res = await asyncSite.securityRuleQuery({ data: { siteId: this.$route.query.siteId } })
        if (res.data.data.length !== 0) {
          this.portPerson = res.data.data.shift()
          this.pageItems = res.data.data
        }
      } catch (error) {}
    },
    handleAddPage() {
      if (this.pageItems.length < 3) {
        const item = {
          siteId: this.$route.query.siteId,
          downloadType: this.pageItems[0].downloadType,
          requestWay: 1,
          requestUrl: '',
          paramsExpressionRules: '',
          clickElementXpathRules: '',
          pageCollectionSequence: this.pageItems.length + 2
        }
        this.pageItems.push(item)
      } else {
        this.$Message.warning('缴费信息最多含有3个page')
      }
    },
    handleRemove(index) {
      this.pageItems.splice(index, 1)
    }
  }
}
</script>

